<template>
<div class="padding10">
  <div class="box box-custom">
    <div class="box-header with-border">
      <h3 class="box-title"></h3>
      <button type="button" class="btn btn-custom pull-right" v-on:click="showAdd()"></button>
    </div>
    <div class="box-body">
      <div>
        <span class="label bg-red">color: bg-red</span>
        <span class="label bg-yellow">color: bg-yellow</span>
        <span class="label bg-aqua">color: bg-aqua</span>
        <span class="label bg-blue">color: bg-blue</span>
        <span class="label bg-light-blue">color: bg-light-blue</span>
        <span class="label bg-green">color: bg-green</span>
        <span class="label bg-navy">color: bg-navy</span>
        <span class="label bg-teal">color: bg-teal</span>
        <span class="label bg-olive">color: bg-olive</span>
        <span class="label bg-lime">color: bg-lime</span>
        <span class="label bg-orange">color: bg-orange</span>
        <span class="label bg-fuchsia">color: bg-fuchsia</span>
        <span class="label bg-purple">color: bg-purple</span>
        <span class="label bg-maroon">color: bg-maroon</span>
        <span class="label bg-black">color: bg-black</span>
        <span class="label bg-gray">color: bg-gray</span>
        <span class="label bg-gray-light">color: bg-gray-light</span>
        <span class="label label-danger">color: label-danger</span>
        <span class="label label-info">color: label-info</span>
        <span class="label label-warning">color: label-warning</span>
        <span class="label label-primary">color: label-primary</span>
        <span class="label label-success">color: label-success</span>
      </div>
    </div>
  </div>
  <el-dialog width="60%"
  :title="dialogTitle"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
  </el-dialog>
</div>
</template>
<script>
export default {
  name: 'example',
  components: {
  },
  props: {
  },
  data () {
    return {
      dialogVisible: false,
      dialogTitle: '',
    }
  },
  watch: {
    // 监听参数变化
    options: {
      handler: function(val) {
        this.options = val;
        this.renderCharts();
      },
      // 深度观察
      deep: true
    }
  },
  computed: {},
  methods: {
    showAdd () {
      this.dialogTitle = '新建问卷'
      this.dialogVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    }
  },
  beforeCreate () {},
  created () {},
  beforeMount () {},
  mounted () {},
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
